<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="motionPath">
      <div class="motion-path">
        <div class="small square el follow-path"></div>
        <svg width="100%" height="110%" viewBox="0 0 256 112">
          <path
            fill="none"
            stroke="currentColor"
            stroke-width="1"
            d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"
          ></path>
        </svg>
      </div>
    </div>
    <div class="line player">
      <input
        class="progress"
        step=".001"
        type="range"
        min="0"
        max="100"
        value="0"
      />
    </div>
    <script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
    <script>
      var path = anime.path("#motionPath path");

      var motionPath = anime({
        targets: "#motionPath .el",
        translateX: path("x"), // 沿着路径对象的x值
        translateY: path("y"), // 沿着路径对象的y值
        rotate: path("angle"), // 沿着路径对象的角度值
        easing: "linear",
        duration: 2000,
        autoplay: false
      });
      var seekProgressEl = document.querySelector(".progress");

      seekProgressEl.addEventListener("input", function() {
          console.log(motionPath.duration * (seekProgressEl.value / 100))
          console.log('seekProgressEl.value: ', seekProgressEl.value);
        motionPath.seek(motionPath.duration * (seekProgressEl.value / 100));
      });
    </script>
  </body>
</html>
